<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="query"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @input="getSList"
      @clear="onClear"
    />
    <!-- 搜索历史记录 -->
    <div v-if="isShowHistory" class="search-history">
      <div class="history-title">
        <p>历史记录:</p>
        <van-icon name="delete" @click="clearKw" />
      </div>
      <!-- 历史记录tag -->
      <van-tag
        @click="tagClickHandle(item)"
        v-for="(item,index) in kw"
        :key="index"
        size="large"
      >{{ item }}</van-tag>
    </div>
    <!-- 搜索建议列表 -->
    <van-cell-group>
      <van-cell
        @click="goToGoodsDetail(item.goods_id)"
        v-for="(item,index) in sList"
        :key="index"
        :title="item.goods_name"
      />
    </van-cell-group>
  </div>
</template>

<script>
// 搜索页面功能
// 1.展示搜索建议列表
// 2.触发搜索跳转到商品列表页
// 3.记录每一次搜索的关键字
// 4.清空搜索框
// 5.搜索历史记录最多保存十条
export default {
  data() {
    return {
      query: "",
      sList: [],
      kw: []
    };
  },
  created() {
    // 先去本地存储中读取kw
    this.kw = JSON.parse(window.localStorage.getItem("kw"));
  },
  methods: {
    onSearch() {
      // 编程式导航
      this.$router.push("/pages/goods_list?query=" + this.query);
      // kw要去重 如果输入的关键词 已经存在了 则不追加
      if (this.kw.indexOf(this.query) === -1) {
        // 追加到数组的最前面
        this.kw.unshift(this.query);
      }
      // 搜索的关键词 只保留前十项
      this.kw = this.kw.slice(0, 10);
      // 触发搜索之后再记录 搜索关键词
      // 把kw存到本地存储中
      // 本地存储中只能保存字符串
      window.localStorage.setItem("kw", JSON.stringify(this.kw));
    },
    // 清空搜索关键词
    clearKw() {
      this.kw = [];
      // 清空本地存储中的kw
      window.localStorage.setItem("kw", "[]");
    },
    // 点击历史记录tag 触发搜索
    tagClickHandle(query) {
      this.$router.push("/pages/goods_list?query=" + query);
    },
    onCancel() {
      console.log("取消");
    },
    onClear() {
      this.query = "";
      this.sList = [];
    },
    // 获取搜索建议列表
    async getSList() {
      // 做非空校验
      if (this.query.trim() == "") {
        return;
      }
      const { data: res } = await this.$http.get(
        "/goods/qsearch?query=" + this.query
      );
      if (res.meta.status !== 200) {
        return this.$toast.fail("查询数据失败");
      }
      this.sList = res.message;
    },
    goToGoodsDetail(id) {
      console.log(id);
      this.$router.push("/pages/goods_detail/" + id);
    }
  },
  // 计算属性 特点 只要参与运算的成员发生了更新 就会重新计算它的值
  computed: {
    isShowHistory: function() {
      // 做非空校验
      if (this.query.trim() == "") {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 10px;
  p {
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #6c6c6c;
  }
}
.van-tag {
  margin: 5px;
}
</style>